<template>
  <div>
    <h1><i class="el-icon-eleme"></i>易餐饮</h1>
    <div style="height: 90vh;background-color: gainsboro">
      <img src="../../pic/bg1.jpg" width="1100" style="margin: 70px 30px 0 10px;float: left"/>
      <div style="width: 350px;height: 505px;background-color: white;float: left;margin-top: 70px;padding: 20px">
        <br>
        <h1 style="text-align: center">易餐饮 {{opera == 'login' ? '登录' : '注册'}}</h1>
        <br><br>
        <el-form v-if="opera == 'login'" ref="form" :model="form" :rules="rules">
          <el-form-item prop="name">
            <el-input prefix-icon="el-icon-user-solid" v-model="form.name" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-s-opportunity" show-password v-model="form.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <br><br>
          <el-form-item>
            <el-button type="primary" style="width: 100%" @click="login">登录</el-button>
            <el-link @click="regist">还没账号，点击注册</el-link>
          </el-form-item>
        </el-form>

        <el-form v-if="opera == 'register'" ref="registerForm" :rules="rules" :model="registerForm">
          <el-form-item prop="name">
            <el-input prefix-icon="el-icon-user-solid" v-model="registerForm.name" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-s-opportunity" show-password v-model="registerForm.password" placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item prop="role">
            <el-radio v-model="registerForm.role" label="1">商家</el-radio>
            <el-radio v-model="registerForm.role" label="0">普通用户</el-radio>
          </el-form-item>
          <br><br>
          <el-form-item>
            <el-button type="primary" style="width: 100%" @click="register">注册</el-button>
            <el-link @click="backLogin">返回登录</el-link>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data(){
    return{
      form: {},
      registerForm: {},
      opera: "login",
      rules: {
        name:[{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password:[{ required: true, message: '请输入密码', trigger: 'blur' }],
        role:[{ required: true, message: '请选择角色', trigger: 'blur' }],
      },
    }
  },
  methods:{
    login(){
      this.$refs.form.validate(valid => {
        if (valid) {
          this.axios.get("http://localhost:8080/user/login?name="+this.form.name+"&password="+this.form.password).then(res => {
            console.info(res.data.data)
            if (res.data.code == 200) {
              localStorage.setItem("user", JSON.stringify(res.data.data))
              if (res.data.data.role == 1) {
                this.$router.push("/foodList")
              }else {
                this.$router.push("/orderFood")
              }
            } else {
              this.$message.error("请检查账号密码！")
            }
          })
        }
      })

    },
    regist(){
      this.opera = "register"
      this.registerForm = {}
    },
    backLogin(){
      this.opera = "login"
      this.form = {}
    },
    register(){
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          this.axios.post("http://localhost:8080/user/register", this.registerForm).then(res => {
            console.info(res.data)
            if (res.data.code == 200){
              this.$message.success("注册成功！请登录！")
              this.opera = "login"
            }
          })
        }
      })

    }

  }
}
</script>

<style scoped>

</style>
